Dart Sass替换Node Sass |
您所在的位置：网站首页 › scss v-deep › Dart Sass替换Node Sass |
|
为什么要替换
1、因为node-sass和node.js版本关联太紧了，如果这两个版本不匹配，就会起冲突，导致项目无法运行；但是dart-sass 安装没有兼容性问题 2、sass官网团队也强烈建议使用dart-sass。 sass团队强烈建议使用dart-sass Sass 官方团队正式宣布 Libsass 将弃用，以及基于它的 Node Sass 和 SassC，并且建议用户使用 Dart Sass。 3、node-sass仓库在墙外, 且新特性都会先在dart-sass实现 Sass团队官宣2020年10月27日，Sass 官方团队正式宣布 Libsass 将弃用，以及基于它的 Node Sass 和 SassC，并且建议用户使用 Dart Sass。如果在vue脚手架搭建的项目中需要使用sass，建议初始化时勾选sass配置，自行安装，选择默认的就是dart-sass。dart-sass替代node-sass根本原因：node-sass无法下载特定版本的二进制依赖文件（博主没有深入研究） dart-sass使用前需要注意几点：dart-sass 和 node-sass都是用来将sass编译成css的工具，所以都依赖sass-loader。但node-sass 与 node.js 版本相关联，这就导致，一旦本地 node.js 升级，就会出现 node-sass 无法工作的情况 npm 上的 dart-sass 包已被弃用，直接更名为 sass dart-sass 不支持/deep/，要改成::v-deep 安装dart-sass卸载node-sass // npm npm uninstall node-sass // yarn yarn remove node-sass安装dart-sass // npm npm install --dev sass // yarn yarn add sass --dev dart-sass与node-sass 的区别：node-sass 是用 node(调用 cpp 编写的 libsass)来编译 sass dart-sass 是用 drat VM 来编译 sass node-sass是自动编译实时的，dart-sass需要保存后才会生效 dart-sass 性能更好（也是 sass 官方使用的），而且 node-sass依赖node版本，所以会出很多问题（node-sass:4.14.1，node:14.19.3可以正常使用，mac本node-sass依赖python3，装机默认是python2.7，所以还需要下载python3） dart-sass优势不存在依赖二进制文件即可完成安装，避免了node-sass因为依赖其他文件而失败 允许使用sass和css新特性 避免工程其他依赖升级的不兼容node-sass导致报错的问题 dart-sass缺陷性能：由于node-sass使用C++实现的样式预处理器，速度相比于纯Javascript实现Dart Sass要快 内存：执行编译过程中，Node Sass的内存占用也比Dart Sass要小很多 注意：在替换完Node Sass后，需要用::v-deep代替/deep/和>>> (注:如果在css中直接这么写是没用作用的) 来进行样式穿透。最重要原因是 vue 3.0 RFC中指定的写法，我们这么写之后可以尽量的最大程度减少升级到Vue3的复杂度。 // 实例： .a { >>> { .b { color: red; } } } /* 或者 */ .a { /deep/ { .b { color: red; } } } /* 修改为 */ .a { ::v-deep { .b { color: red; } } }参考文档： 继往开来的 sass 三代编译器：ruby sass、node-sass、dart-sass Node Sass 弃用，以 Dart Sass 代替 原创 Sass 官方团队正式宣布 Libsass 将弃用，以及基于它的 Node Sass 和 SassC，并且建议用户使用 Dart Sass。 抛弃 node-sass，拥抱 dart-sass 继往开来的 sass 3 代编译器：ruby sass、node-sass、dart-sass |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |